<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/js/element-ui/lib/theme-chalk/index.css">
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>图片压缩</el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>
            <el-main>
                <el-form :model="form" label-width="120px">
                    <!-- <el-form-item label="Activity name">
                        <el-input v-model="form.name" />
                    </el-form-item> -->

                    <el-form-item label="图片质量">
                        <el-slider v-model="form.value" />
                    </el-form-item>

                    <el-form-item label="上传图片">
                        <el-upload class="upload-demo" action="/tu/uploadImg" :data="form" :on-preview="handlePreview"
                            :on-remove="handleRemove" :on-success="handleSuccess">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">
                                <!-- 只能上传jpg/png文件，且不超过500kb -->
                            </div>
                        </el-upload>
                    </el-form-item>

                </el-form>
                <div v-for="item in fileList">
                    <a :href="item">{{item}}</a>
                </div>
            </el-main>
            <!-- <el-footer>Footer</el-footer> -->
        </el-container>

    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                fileList: [],
                value: 20,
                form: {
                    name: '',
                    value: 20
                },
            }
        },
        methods: {
            handleRemove(file, fileList) {
                // console.log(file, fileList);
            },
            handlePreview(file) {
                // console.log(file);
            },
            handleSuccess(res, a, b) {
                //
                console.log(res);
                this.fileList.push(res.url);
            }
        }
    })

</script>

</html>